<template>
	<view class="page">
		<view class="title"><view/>基础信息</view>
		<view class="baseInfo">
			<view><view>患者姓名:</view>{{ info.userName }}</view>
			<view><view>开方日期:</view>{{ info.createTime }}</view>
			<view><view>处理医生:</view>{{ info.doctorName }}</view>
			<view><view>处理日期:</view>{{ info.processedTime }}</view>
		</view>
		<view class="title"><view/>风险评估</view>
		<view class='ql-container' v-html="info.riskAssessment" />
		<view class="title"><view/>运动处方内容</view>
		<view class='ql-container' v-html="info.content" />
		<template v-if="info.aiModelContent">
			<view class="title"><view/>运动处方方案</view>
			<u-parse class='ql-container' :content="info.aiModelContent" />
		</template>
		<view class="sign">
			<view>
				医生签名: <image :src="info.signature" style="height: 40rpx;margin-left: 20rpx;" mode="heightFix" />
			</view>
			日期: {{ info.processedTime.slice(0,10) }}
		</view>
	</view>
</template>

<script>
	import { recipeDetail } from "@/api/prescription.js";
	export default {
		data() {
			return {
				info: {}
			}
		},
		onLoad(e) {
			// 获取处方详情
			recipeDetail({sign: e.sign}).then(res => this.info = res)
		},
		methods: {
		}
	}
</script>

<style lang="scss" scoped>
.baseInfo {
	display: flex;
	flex-wrap: wrap;
	row-gap: 30rpx;
	> view {
		view {
			font-weight: bold;
		}
		width: 50%;
	}
}
::v-deep .ql-container {
	height: auto;
	font-size: 30rpx;
	strong, h3 {
		color: #333;
	}
	h3 {
		margin-top: 30rpx;
		font-size: 32rpx;
	}
	li::before {
		color: #fe5e10;
		width: 1em;
	}
	ul {
		padding-left: 40rpx;
	}
}
.page {
	padding: 10rpx 40rpx 40rpx 40rpx;
	color: #666;
	line-height: 1.6;
	font-size: 30rpx;
	background: #fff;
}
.title {
	color: #fe5e10;
	font-size: 34rpx;
	margin: 30rpx 0;
	font-weight: bold;
	display: flex;
	align-items: center;
	view {
		width: 8rpx;
		height: 32rpx;
		border-radius: 4rpx;
		background-color: #fe5e10;
		margin-right: 16rpx;
	}
}
.sign {
	text-align: right;
	view {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin: 10rpx 0;
	}
}
</style>